<script>
  import { getContext } from 'svelte';
  const ctx = getContext('iconCtx') ?? {};
  let className = ctx.class || '';
  export { className as class };
  export let size = ctx.size || '24';
  export let role = ctx.role || 'img';
  export let color = ctx.color || 'currentColor';
  export let withEvents = ctx.withEvents || false;
  export let ariaLabel = 'sun';
  export let title = {
    id: `sun-title-${Math.random().toString(36).substring(7)}`,
    title: ariaLabel,
  };
  export let desc = {
    id: `sun-desc-${Math.random().toString(36).substring(7)}`,
    desc: 'A sun icon',
  };
  let ariaDescribedby = `${title.id || ''} ${desc.id || ''}`;
  let hasDescription = false;
  $: if (title.id || desc.id) {
    hasDescription = true;
  } else {
    hasDescription = false;
  }
</script>

{#if withEvents}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    {...$$restProps}
    {role}
    width={size}
    height={size}
    class={className}
    aria-label={ariaLabel}
    aria-describedby={hasDescription ? ariaDescribedby : undefined}
    viewBox="0 0 21 22"
    on:click
    on:keydown
    on:keyup
    on:focus
    on:blur
    on:mouseenter
    on:mouseleave
    on:mouseover
    on:mouseout>
    {#if title.id && title.title}
      <title id={title.id}>{title.title}</title>
    {/if}
    {#if desc.id && desc.desc}
      <desc id={desc.id}>{desc.desc}</desc>
    {/if}

    <path
      d="M10.9688 0.96875C11.3949 0.96875 11.7404 1.31422 11.7404 1.74038V4.05529C11.7404 4.48145 11.3949 4.82692 10.9688 4.82692C10.5426 4.82692 10.1971 4.48145 10.1971 4.05529V1.74038C10.1971 1.31422 10.5426 0.96875 10.9688 0.96875Z"
      fill={color} />
    <path
      d="M6.33894 11C6.33894 8.44303 8.41178 6.37019 10.9688 6.37019C13.5257 6.37019 15.5986 8.44303 15.5986 11C15.5986 13.557 13.5257 15.6298 10.9688 15.6298C8.41178 15.6298 6.33894 13.557 6.33894 11Z"
      fill={color} />
    <path
      d="M18.062 4.99806C18.3633 4.69672 18.3633 4.20815 18.062 3.9068C17.7606 3.60546 17.2721 3.60546 16.9707 3.9068L15.3338 5.54369C15.0325 5.84503 15.0325 6.3336 15.3338 6.63494C15.6352 6.93629 16.1237 6.93629 16.4251 6.63494L18.062 4.99806Z"
      fill={color} />
    <path
      d="M21 11C21 11.4262 20.6545 11.7716 20.2284 11.7716H17.9135C17.4873 11.7716 17.1418 11.4262 17.1418 11C17.1418 10.5738 17.4873 10.2284 17.9135 10.2284H20.2284C20.6545 10.2284 21 10.5738 21 11Z"
      fill={color} />
    <path
      d="M16.9706 18.0931C17.2719 18.3945 17.7605 18.3945 18.0619 18.0931C18.3632 17.7918 18.3632 17.3032 18.0619 17.0019L16.425 15.365C16.1236 15.0636 15.6351 15.0636 15.3337 15.365C15.0324 15.6663 15.0324 16.1549 15.3337 16.4562L16.9706 18.0931Z"
      fill={color} />
    <path
      d="M10.9688 17.1731C11.3949 17.1731 11.7404 17.5186 11.7404 17.9447V20.2596C11.7404 20.6858 11.3949 21.0312 10.9688 21.0312C10.5426 21.0312 10.1971 20.6858 10.1971 20.2596V17.9447C10.1971 17.5186 10.5426 17.1731 10.9688 17.1731Z"
      fill={color} />
    <path
      d="M6.60387 16.4563C6.90522 16.1549 6.90522 15.6663 6.60387 15.365C6.30253 15.0637 5.81396 15.0637 5.51262 15.365L3.87573 17.0019C3.57439 17.3032 3.57439 17.7918 3.87573 18.0931C4.17707 18.3945 4.66565 18.3945 4.96699 18.0931L6.60387 16.4563Z"
      fill={color} />
    <path
      d="M4.79567 11C4.79567 11.4262 4.4502 11.7716 4.02404 11.7716H1.70913C1.28297 11.7716 0.9375 11.4262 0.9375 11C0.9375 10.5738 1.28297 10.2284 1.70913 10.2284H4.02404C4.4502 10.2284 4.79567 10.5738 4.79567 11Z"
      fill={color} />
    <path
      d="M5.5125 6.63493C5.81384 6.93628 6.30241 6.93628 6.60376 6.63493C6.9051 6.33359 6.9051 5.84502 6.60376 5.54368L4.96687 3.90679C4.66553 3.60545 4.17696 3.60545 3.87562 3.90679C3.57427 4.20814 3.57427 4.69671 3.87562 4.99805L5.5125 6.63493Z"
      fill={color} />
  </svg>
{:else}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    {...$$restProps}
    {role}
    width={size}
    height={size}
    class={className}
    aria-label={ariaLabel}
    aria-describedby={hasDescription ? ariaDescribedby : undefined}
    viewBox="0 0 21 22">
    {#if title.id && title.title}
      <title id={title.id}>{title.title}</title>
    {/if}
    {#if desc.id && desc.desc}
      <desc id={desc.id}>{desc.desc}</desc>
    {/if}

    <path
      d="M10.9688 0.96875C11.3949 0.96875 11.7404 1.31422 11.7404 1.74038V4.05529C11.7404 4.48145 11.3949 4.82692 10.9688 4.82692C10.5426 4.82692 10.1971 4.48145 10.1971 4.05529V1.74038C10.1971 1.31422 10.5426 0.96875 10.9688 0.96875Z"
      fill={color} />
    <path
      d="M6.33894 11C6.33894 8.44303 8.41178 6.37019 10.9688 6.37019C13.5257 6.37019 15.5986 8.44303 15.5986 11C15.5986 13.557 13.5257 15.6298 10.9688 15.6298C8.41178 15.6298 6.33894 13.557 6.33894 11Z"
      fill={color} />
    <path
      d="M18.062 4.99806C18.3633 4.69672 18.3633 4.20815 18.062 3.9068C17.7606 3.60546 17.2721 3.60546 16.9707 3.9068L15.3338 5.54369C15.0325 5.84503 15.0325 6.3336 15.3338 6.63494C15.6352 6.93629 16.1237 6.93629 16.4251 6.63494L18.062 4.99806Z"
      fill={color} />
    <path
      d="M21 11C21 11.4262 20.6545 11.7716 20.2284 11.7716H17.9135C17.4873 11.7716 17.1418 11.4262 17.1418 11C17.1418 10.5738 17.4873 10.2284 17.9135 10.2284H20.2284C20.6545 10.2284 21 10.5738 21 11Z"
      fill={color} />
    <path
      d="M16.9706 18.0931C17.2719 18.3945 17.7605 18.3945 18.0619 18.0931C18.3632 17.7918 18.3632 17.3032 18.0619 17.0019L16.425 15.365C16.1236 15.0636 15.6351 15.0636 15.3337 15.365C15.0324 15.6663 15.0324 16.1549 15.3337 16.4562L16.9706 18.0931Z"
      fill={color} />
    <path
      d="M10.9688 17.1731C11.3949 17.1731 11.7404 17.5186 11.7404 17.9447V20.2596C11.7404 20.6858 11.3949 21.0312 10.9688 21.0312C10.5426 21.0312 10.1971 20.6858 10.1971 20.2596V17.9447C10.1971 17.5186 10.5426 17.1731 10.9688 17.1731Z"
      fill={color} />
    <path
      d="M6.60387 16.4563C6.90522 16.1549 6.90522 15.6663 6.60387 15.365C6.30253 15.0637 5.81396 15.0637 5.51262 15.365L3.87573 17.0019C3.57439 17.3032 3.57439 17.7918 3.87573 18.0931C4.17707 18.3945 4.66565 18.3945 4.96699 18.0931L6.60387 16.4563Z"
      fill={color} />
    <path
      d="M4.79567 11C4.79567 11.4262 4.4502 11.7716 4.02404 11.7716H1.70913C1.28297 11.7716 0.9375 11.4262 0.9375 11C0.9375 10.5738 1.28297 10.2284 1.70913 10.2284H4.02404C4.4502 10.2284 4.79567 10.5738 4.79567 11Z"
      fill={color} />
    <path
      d="M5.5125 6.63493C5.81384 6.93628 6.30241 6.93628 6.60376 6.63493C6.9051 6.33359 6.9051 5.84502 6.60376 5.54368L4.96687 3.90679C4.66553 3.60545 4.17696 3.60545 3.87562 3.90679C3.57427 4.20814 3.57427 4.69671 3.87562 4.99805L5.5125 6.63493Z"
      fill={color} />
  </svg>
{/if}
